<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/font-awesome.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/good.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <style>
        #page-wrapper h1{ display: block; margin-bottom: 20px; border-bottom:1px solid #999; font-size: 16px; padding-left:2px; font-weight: bold; line-height: 35px;}
        select.year,select.mouth{ width: 100px;}
        #btn{ display: inline-block; background-color: #ffbe34; line-height: 35px; padding: 0 15px; font-size: 14px; color: #fff; border-radius: 4px; cursor: pointer;}
        #depart-box{ display: block; padding: 20px;}
        #depart-box label{ display: inline-block; margin: 20px 20px 0;}
        #depart-box .bot{ display: block; padding-top: 50px; text-align: center;}
        .form-control{ border: none; box-shadow: none; margin-top: 3px; background-color: transparent;}
        .img-box{ display: block; margin: 10px 5% 0 10%; padding: 10px;}
        .img-box img{ border: 1px solid #ccc; margin: 0 5px; max-height: 100px;}
        .total-price{ color: #ffbe34; font-size: 24px;}

        .mes-box{ display: block; margin-left: 10%; overflow: hidden;}
        .mes-tit{ display: block; padding: 0 20px; line-height: 40px; background-color: #eee; border-top: 1px solid #ccc; overflow: hidden;}
        .mes-tit .name {
            float: left;
            width: 35%;
        }

        .mes-box .contract {
            float: left;
            width: 33.3%;
        }

        .mes-box .number {
            float: left;
            width: 33.3%;
        }

        .mes-box .price {
            float: right;width: 33.3%;
        }

        /*.mes-li .name {*/
            /*float: left;*/
            /*width: 35%;*/
        /*}*/

        /*.mes-li .contract {*/
            /*float: left;*/
            /*width: 35%;*/
        /*}*/

        /*.mes-li .number {*/
            /*float: left;*/
        /*}*/

        /*.mes-li .price {*/
            /*float: right;*/
        /*}*/
        .mes-box ul{ display: block; margin: 0; padding: 0; overflow: hidden;}
        .mes-box li{ display: block; padding: 20px; border-bottom: 1px solid #ccc; overflow: hidden;}
        .mes-box li .box{width: 100%;}
        .mes-box li .box img{ float: left; margin-right: 10px; border: 1px solid #ccc;}
        .mes-box li .price{ float: right;}
        .box .tit{ display: inline-block;}
        #offline-pay{ display: inline-block; padding: 0 10px; line-height: 35px; background-color: #ffbe34; color: #fff; border-radius: 5px; cursor: pointer;}
        .bot-span{ text-align: right;}
        .remark-con{ display: block; border: 1px solid #ccc; padding: 10px 20px; line-height: 200%; min-height: 75px;}
        .user-name{ padding-left: 30px;}
        .order-image{ margin:0;}
    </style>
</head>
<body>

<div id="page-wrapper">
    <div class="panel panel-f5">
        <div class="panel-body row">
            <div class="form-horizontal">
                <h1>● 订单状态</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">当前订单状态：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-if="orderObj.status==1">待支付</span>
                        <span class="form-control" v-if="orderObj.status==2">购买成功</span>
                        <span class="form-control" v-if="orderObj.status==3">已关闭</span>
                        <span class="form-control" v-if="orderObj.status==4">返现中</span>
                        <span class="form-control" v-if="orderObj.status==5">已到期</span>
                    </div>
                </div>

                <h1>● 订单信息</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">订单编号：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-text="orderId"></span>
                    </div>
                    <div class="col-sm-5 col-xs-4">
                        <span class="control-label col-sm-2 col-xs-4  detail-span">下单人：</span>
                        <span class="form-control" v-text="orderObj.name"></span>
                    </div>
                </div>
                <h1 style="border:1px dashed #ccc"></h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">手机号：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-text="orderObj.phone"></span>
                    </div>
                    <div class="col-sm-5 col-xs-4">
                        <span class="control-label col-sm-2 col-xs-4  detail-span">下单时间：</span>
                        <span class="form-control" v-text="orderObj.createTime"></span>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">身份证号：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-text="orderObj.idCard"></span>
                    </div>
                </div>
                <h1 style="border:1px dashed #ccc"></h1>

                <h1>● 协议内容</h1>
                <div class="form-group">
                    <div class="col-sm-10 col-xs-10 mes-box">
                        <div class="mes-tit">
                            <span class="contract">合同</span>
                            <#--<span class="name">消费记录</span>-->
                            <span class="number">账户信息</span>
                            <span class="price">补贴信息</span>
                        </div>
                        <ul>
                            <li class="mes-li">
                                <div class="contract">
                                    <button type="button" class="btn btn-white btn-xs" onclick="viewContract();">查看合同 </button>
                                </div>
                                <#--<div class="name">-->
                                    <#--<button type="button" class="btn btn-white btn-xs" onclick="viewExpense();">消费记录 </button>-->
                                <#--</div>-->
                                <div class="number">
                                    <button type="button" class="btn btn-white btn-xs" onclick="viewAccount();">账户信息 </button>
                                </div>
                                <div class="price">
                                    <button type="button" class="btn btn-white btn-xs" onclick="viewInformation();">补贴信息 </button>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <h1 style="border:1px dashed #ccc"></h1>

                <h1>● 协议信息</h1>
                <div class="form-group">
                    <div class="col-sm-10 col-xs-10 mes-box">
                        <div class="mes-tit">
                            <span class="name">协议信息</span>
                            <span class="price">签约金额</span>
                        </div>
                        <ul>
                            <li class="mes-li">
                                <div class="box">
                                    <img :src="protoObj.cover" width="100">{{protoObj.name}}
                                </div>
                                <div class="price">￥{{protoObj.price}}</div>
                            </li>
                        </ul>
                    </div>
                </div>

                <h1>● 费用信息</h1>
                <div class="form-group" v-if="orderObj.status==1 || orderObj.status==3">
                    <span class="control-label detail-span col-sm-11 col-xs-11 bot-span">应付金额：<b class="total-price" >￥{{orderObj.moneyCount}}</b></span>
                </div>
                <div class="form-group" v-if="orderObj.status==2 || orderObj.status==4 || orderObj.status==5">
                    <span class="control-label detail-span col-sm-11 col-xs-11 bot-span">已付金额：<b class="total-price" >￥{{orderObj.moneyCount}}</b></span>
                </div>
                <h1 style="border:1px dashed #ccc"></h1>
            </div>
        </div>
    </div>
</div>

<script src="${basePath}/bootstrap/js/vue.min.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/common.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/campsite.js" type="text/javascript"></script>
<script type="text/javascript">

    var orderId = "";
    var status = 1;
    var vue = new Vue({
        el: "#page-wrapper",
        data: {
            dataObj: {},
            orderObj: {},
            protoObj: {},
            orderId: ""
        },
        methods: {},
        created: function(){
            var _this = this;
            var cur = window.location.href.split("&");
            console.log(cur)
            cur = cur[cur.length-1];
            var id = cur.split("=")[1];
            $.ajax({
                url: '${basePath}/admin/agent/order/queryOrderById',
                type: 'GET',
                dataType: 'json',
                data: {
                    orderId: id
                },
                success: function(data){
                    console.log(data.result)
                    _this.orderId = id;
                    _this.dataObj = data.result;
                    _this.orderObj = data.result.agentOrderInfoDto;
                    _this.protoObj = data.result.agentProtocolDto;
                    orderId = data.result.agentOrderInfoDto.orderIdStr;
                    status = data.result.agentOrderInfoDto.status;
                },
                error: function(){
                    console.log("error")
                }
            })
        }
    })

    //新增上传框
    $('.add-inputfile5').on('click',function(){
        addImg('policy',this);
    });
    function addImg(name1,obj) {
        var str1 = "<div class='inputfile-img-box'><input class='obj-input' name=" + name1 + " value='' type='hidden'>" +
                "<img class='obj-img' src='' style='display:none' width='100' height='100'><span class='input-file'>" +
                "<input data-image=" + name1 + " data-action='goods' type='file' onchange='uploadImg(this)'></span><i class='fa fa-close'></i></div>";
        var len = $(obj).parent().find(".inputfile-img-box").length;
        if (len < 2) {
            $(obj).before(str1);
        }
        else {
            return false
        }
        $("i.fa-close").click(function () {
            $(this).parent().remove();
        });
    }

    function addSer(obj){
    <#--layer.open({-->
    <#--type: 2,-->
    <#--area: ['600px','500px'],-->
    <#--title: ['','text-align:center;font-weight:bold;background:#fff;'],-->
    <#--content: ['${basePath}/admin/series/create?shopId='+'${shopId!}'+'&revet=third','no'],-->
    <#--success: function (layero, index) {-->
    <#--//layer.iframeAuto(index)//高度自适应-->
    <#--},-->
    <#--end:function(){-->
    <#--window.location.reload()-->
    <#--}-->
    <#--});-->
        var _this = "<img src='"+$(obj).attr("data-name")+"' style='max-height: 450px;'>";
        layer.open({
            type: 1,
            area: ['auto','auto'],
            title: false,
            content: _this,
            end: function () {
                layer.closeAll()
            }
        });
    }

    function goBack(){
        window.location.href="${basePath}/orderPackage/list";
    }
    $(function(){
    <#--var imgArr = ${orderProductDto.credentialsUrl};-->
    <#--var temp = "";-->
    <#--for(var i= 0,len=imgArr.length;i<len;i++){-->
    <#--temp += '<img src="'+imgArr[i]+'" height="100">';-->
    <#--$("#credentialsUrl").append(temp);-->
    <#--}-->

        $(".img-box img").each(function(){
            $(this).click(function(){
                var _this = "<img src='"+$(this).attr("src")+"' style='max-height: 450px;'>";
                layer.open({
                    type: 1,
                    area: ['auto','auto'],
                    title: false,
                    content: _this,
                    end: function () {
                        layer.closeAll()
                    }
                });
            })
        })

        <#--$("#offline-pay").click(function(){-->
            <#--//请求数据成功后 => 弹窗-->
            <#--//$.ajax();-->
            <#--layer.open({-->
                <#--type: 2,-->
                <#--area: ['700px','400px'],-->
                <#--title: ['确认订单款项','font-weight:bold;background:#fff;'],-->
                <#--content: ['${basePath}/admin/order/product/offline/' + ${orderProductDto.orderId},'yes'],-->
                <#--end: function () {-->
                    <#--layer.closeAll()-->
                <#--}-->
            <#--});-->
        <#--})-->
    });

    /*审核合同*/
    function viewContract(id){
        layer.open({
            type: 2,
            area: ['90%', '90%'],
            title:['审核合同','text-align:center;'],
            content: '${basePath}/admin/agent/order?pageName=contract_list&order='+orderId //iframe的url
        })
    }

    /*消费记录*/
    function viewExpense(id){
        layer.open({
            type: 2,
            area: ['90%', '90%'],
            title:['消费记录','text-align:center;'],
            content: '${basePath}/admin/agent/order?pageName=expense_history&order='+orderId //iframe的url
        })
    }

    /*账户信息*/
    function viewAccount(id){
        layer.open({
            type: 2,
            area: ['700px', '90%'],
            title:['账户信息','text-align:center;'],
            content: '${basePath}/admin/agent/order?pageName=account_detail&status='+status+'&order='+orderId //iframe的url
        })
    }

    /*查看信息*/
    function viewInformation(){
        layer.open({
            type: 2,
            area: ['90%', '90%'],
            title:'协议订单-查看补贴信息',
            content: '${basePath}/admin/agent/order?pageName=subsidies_list&order='+orderId //iframe的url
        })
    }

</script>
</body>
</html>
